import React, { PureComponent } from "react";
import Home from "./Home";
import Recommend from "./Recommend";
import Profile from "./Profile";

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      message: 'Hello World',
      count: 0
    }
  }

  changeText() {
    this.setState({
      message: '你好世界'
    })
  }

  increase() {
    this.setState({
      count: this.state.count + 1
    })
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //   // App进行性能优化
  //   // message和count数据没变化时不更新组件
  //   if(this.state.message !== nextState.message || this.state.count !== nextState.count) {
  //     return true
  //   }
  //   return false
  // }

  render() {
    // App文件中setState重新渲染页面，组件也会重新渲染（即使组件没有发生变化）
    console.log('APP render');
    const { message, count } = this.state
    return (
      <div>
        <div>{message}-{count}</div>
        <button onClick={() => this.changeText()}>更改文本</button>
        <button onClick={() => this.increase()}>count+1</button>
        <Home message={message}></Home>
        <Recommend count={count}></Recommend>
        <Profile message={message}></Profile>
      </div>
    )
  }
}

export default App;
